// 清除浮动-在需要清除浮动的父元素上，使用 @include clearfix 就可以清除其内部子元素的浮动并保证父元素高度不塌陷。
@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

// 多行隐藏-这个部分定义了一个多行文本溢出隐藏的 mixin。使用 @include textoverflow() 可以实现多行文本溢出隐藏，并且支持传入参数指定需要显示的行数。
@mixin textoverflow($clamp:1) {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $clamp;
  /*! autoprefixer: ignore next */
  -webkit-box-orient: vertical;
}

//flex box-这个部分定义了一个 Flexbox 布局的 mixin。使用 @include flexbox() 可以快速实现 Flexbox 布局，并且支持传入参数自定义主轴对齐方式、交叉轴对齐方式、主轴方向和是否换行等。
@mixin flexbox($jc:space-between, $ai:center, $fd:row, $fw:nowrap) {
  display: flex;
  display: -webkit-flex;
  flex: 1;
  justify-content: $jc;
  -webkit-justify-content: $jc;
  align-items: $ai;
  -webkit-align-items: $ai;
  flex-direction: $fd;
  -webkit-flex-direction: $fd;
  flex-wrap: $fw;
  -webkit-flex-wrap: $fw;
}

/*
*$line:超出显示几行省略号
*$substract:预留区域百分比
*/
@mixin text-overflow($line:1, $substract:0) {
  overflow: hidden;

  @if $line==1 {
    white-space: nowrap;
    text-overflow: ellipsis;
    width: calc(100% - $substract);
  } @else {
    display: -webkit-box;
    -webkit-line-clamp: $line;
    -webkit-box-orient: vertical;
  }
}

//这个部分定义了一个设置宽高的 mixin。使用 @include WH() 可以快速设置宽高，并且支持传入参数自定义宽度和高度。
@mixin WH($Width:100%, $Height:100%) {
  width: $Width;
  height: $Height;
}

//隐藏全局的滚动条i
::-webkit-scrollbar {
  display: none;
}
